<template>
  <div class="male-dorm">
    <el-table :data="students" stripe border style="width: 100%">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="dormNo" label="宿舍号"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'MaleDorm',
  data() {
    return {
      students: []
    }
  },
  created() {
    this.loadStudents()
  },
  methods: {
    loadStudents() {
      axios.get('/api/students')
        .then(response => {
          this.students = response.data
        })
        .catch(error => {
          console.error('获取学生信息失败', error)
        })
    }
  }
}
</script>

<style scoped>
.male-dorm {
  padding: 20px;
}
</style>
